<template>
  <div class="app-container">
    <div class="content-wrap" style="position: relative">
      <div class="add-btn cursor" @click="handelAdd">新增</div>
      <top-title :updateTime="true" :content="content"></top-title>

      <div class="search-group">
        <div class="input-wrap">
          <div class="label">选择类型:</div>
          <div class="input-item">
            <a-select ref="select" allowClear v-model="queryParam.noticeType" placeholder="请选择文章类型">
              <a-select-option value="1">行业动态</a-select-option>
            </a-select>
          </div>
        </div>

        <div class="input-wrap">
          <div class="label">标题关键字:</div>
          <div class="input-item">
            <j-input :maxLength="30" clearable v-model="queryParam.title" placeholder="请输入标题关键字" />
          </div>
        </div>

        <div class="input-wrap">
          <div class="label">发布时间:</div>
          <div class="time-item">
            <start-end-time
              :times="times"
              :showTime="{ format: 'HH:mm:ss' }"
              format="YYYY-MM-DD HH:mm:ss"
              @timeChange="timeChange"
              :resetTime="resetTime"
            ></start-end-time>
          </div>
        </div>

        <div class="input-wrap">
          <div class="label">作者:</div>
          <div class="input-item">
            <j-input :maxLength="30" v-model="queryParam.author" placeholder="请输入作者名称" />
          </div>
        </div>

        <div class="btn-wrap">
          <a-button
            class="searchBtn"
            @click="searchQuery(queryParam.createTime_begin, queryParam.createTime_end)"
            type="primary"
          >
            搜索
          </a-button>
          <a-button class="resetBtn" @click="searchReset()" type="primary">重置</a-button>
        </div>
      </div>

      <div class="table-wrap">
        <a-table
          rowKey="id"
          class="tableList"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          @change="handleTableChange"
        >
          <template slot="title" slot-scope="records">
            <a-tooltip placement="top">
              <template slot="title">
                <span>{{ records.title }}</span>
              </template>
              <span>{{ records.title }}</span>
            </a-tooltip>
          </template>
          <template slot="action" slot-scope="records">
            <span class="operation deatil-color" @click="detailHandle(records)">详情</span>
            <span class="operation deatil-color" @click="editHandle(records)">编辑</span>
            <span class="operation del-color" @click="showDelete(records)">删除</span>
          </template>
        </a-table>
      </div>
    </div>

    <add-modal ref="addEditAddress" @refresh="searchQuery()"></add-modal>
    <detail-modal ref="detailModal" :title="titleModal" @refresh="searchQuery"></detail-modal>
    <allMessage
      ref="allMessage"
      :publicVisible="publicVisible"
      @cancel="publicVisible = false"
      @tipMessage="tipMessage"
    ></allMessage>
  </div>
</template>

<script>
import addModal from './modules/addContent'
import topTitle from '@/components/topTitle'
import JInput from '@/components/jeecg/JInput'
import detailModal from './modules/detailModal'
import allMessage from '@/components/allMessage'
import startEndTime from '@/components/startEndTime'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { articlesDelete } from '@/api/articles'
import { ajaxGetDictItems } from '@/api/api'
export default {
  name: 'Announcements',
  components: { topTitle, detailModal, addModal, allMessage, startEndTime, JInput },
  mixins: [JeecgListMixin],
  data() {
    return {
      content: [['信息发布']],
      url: {
        list: '/sys/notice_message/page',
      },
      titleModal: '',
      publicVisible: false,
      columns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '文章类型',
          dataIndex: 'noticeType_dictText',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '标题',
          dataIndex: 'title',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '作者',
          dataIndex: 'author',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '发布时间',
          dataIndex: 'createTime',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          ellipsis: true,
          align: 'center',
        },
      ],
      message_type: [],
    }
  },
  mounted() {
    if (this.$route.query) {
      this.queryParam.id = this.$route.query.id
      setTimeout(() => this.searchQuery(), 500)
    }
    this.getSelectValue()
  },
  methods: {
    async getSelectValue() {
      let { result } = await ajaxGetDictItems({ code: 'message_type' })
      this.message_type = result
    },
    timeChange(v, index) {
      console.log(v, index, 'v, index')
      if (index == 1) {
        this.queryParam.createTime_begin = this.$moment(v).valueOf()
      } else {
        this.queryParam.createTime_end = this.$moment(v).valueOf()
      }
      if (v == null) {
        this.queryParam.createTime_begin = null
        this.queryParam.createTime_end = null
      }
    },
    handelAdd() {
      this.$refs.addEditAddress.show()
    },
    editHandle(records) {
      this.$refs.addEditAddress.show(records)
    },
    detailHandle(records) {
      this.$refs.detailModal.show(records)
    },
    showDelete(records) {
      this.publicVisible = true
      this.$refs.allMessage.show(records)
    },
    tipMessage(records) {
      articlesDelete({ id: records.id }).then((res) => {
        this.$message.success(res.message)
        this.publicVisible = false
        this.searchQuery()
      })
    },
  },
}
</script>

<style lang="less" scoped>
.Announcements {
  width: 100%;
  height: 100%;
}
</style>
